<template>
    <page-view class="flex flex-col">
        <title-bar>悠优点餐</title-bar>
        <NoticeBar left-icon="volume-o" :scrollable="true" text="每天都要吃饭呢，选择你想吃的美味吧"></NoticeBar>
        <div class="flex-1 overflow-auto">
            <Skeleton :row="8" :loading="isFirstLoading">
                <List v-model:loading="isloading" :finished="finished" finished-text="没有更多了" @load="loadNextPage">
                    <!-- 轮播图 -->
                    <Swipe class="h-[200px]" :autoplay="5000">
                        <SwipeItem v-for="(item, index) in swiperImage" :key="item">
                            <img :src="baseURL + item" class="w-full h-full object-cover" alt="">
                        </SwipeItem>
                    </Swipe>
                    <!-- 菜品列表 -->
                    <transition-group enter-active-class="animate__animated animate__rotateInDownLeft">
                        <food-item v-for="(item, index) in listData" :key="item.id" :item-data="item"></food-item>
                    </transition-group>
                </List>
            </Skeleton>
        </div>
    </page-view>
</template>

<script>
import { Swipe, SwipeItem, List, Skeleton, NoticeBar} from 'vant';
import FoodItem from "../components/FoodItem.vue";
import API from '@/utils/API';
export default {
    name: "ChooseFood",
    inject: ["baseURL"],
    data() {
        return {
            pageIndex: 1,
            listData: [],
            pageCount: 0,
            swiperImage: [],
            isloading: false,
            isFirstLoading: true,
        }
    },
    components: {
        Swipe,
        SwipeItem,
        FoodItem,
        List,
        Skeleton,
        NoticeBar
    },
    created() {
        this.getListByPage();
    },
    methods: {
        async getListByPage(pageIndex = 1) {
            this.isloading = true;
            try {
                let result = await API.foodInfo.getListByPage({ pageIndex });
                // console.log(result);
                this.pageIndex = result.pageIndex;
                this.listData.push(...result.listData);
                this.pageCount = result.pageCount;
                // 取前四张图片
                if (this.pageIndex == 1) {
                    this.swiperImage = result.listData.slice(0, 4).map(item => {
                        return item.food_img;
                    });
                }
                this.isFirstLoading = false;
            } catch (error) {
                console.log(error);
            }
            finally {
                this.isloading = false;
            }
        },
        // 加载下一页
        loadNextPage() {    
            this.pageIndex++;
            this.getListByPage(this.pageIndex);
        }
    },
    computed: {
        finished() {
            return this.pageIndex >= this.pageCount;
        }
    }
}       
</script>

<style lang="scss" scoped>

</style>